<template>
  <div>
    <CodeCard v-bind="btnDesc">
      <sdn-progress class="demo" :percentage="50"></sdn-progress>
      <sdn-progress class="demo" :percentage="100" :format="format"></sdn-progress>
      <sdn-progress class="demo" :percentage="100" status="success"></sdn-progress>
      <sdn-progress class="demo" :percentage="100" status="warning"></sdn-progress>
      <sdn-progress class="demo" :percentage="50" status="exception"></sdn-progress>
      <template #annotation></template>
    </CodeCard>
  </div>
</template>

<script>


export default {
  components: {
    
  },
  methods: {
    format(percentage) {
      return percentage === 100 ? '满' : `${percentage}%`;
    }
  },
  setup() {
    const btnDesc = {
      title: "基础用法",
      describe: "基础的按钮用法。",
      codeBlock: `
<sdn-progress class="demo" :percentage="50"></sdn-progress>
<sdn-progress class="demo" :percentage="100" :format="format"></sdn-progress>
<sdn-progress class="demo" :percentage="100" status="success"></sdn-progress>
<sdn-progress class="demo" :percentage="100" status="warning"></sdn-progress>
<sdn-progress class="demo" :percentage="50" status="exception"></sdn-progress>`,
      attrs: [
        {
          "name": "percentage",
          "describe": "百分比（必填）",
          "type": "number",
          "emun": "0-100",
          "default": "0"
        }, {
          "name": "type",
          "describe": "进度条类型",
          "type": "string",
          "emun": "line/circle/dashboard",
          "default": "line"
        }, {
          "name": "stroke-width",
          "describe": "进度条的宽度，单位 px",
          "type": "number",
          "emun": "—",
          "default": "6"
        }, {
          "name": "text-inside",
          "describe": "进度条显示文字内置在进度条内（只在 type=line 时可用）",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "status",
          "describe": "进度条当前状态",
          "type": "string",
          "emun": "success/exception/warning",
          "default": "—"
        }, {
          "name": "color",
          "describe": "进度条背景色（会覆盖 status 状态颜色）",
          "type": "string/function/array",
          "emun": "—",
          "default": "''"
        }, {
          "name": "width",
          "describe": "环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）",
          "type": "number",
          "emun": "",
          "default": "126"
        }, {
          "name": "show-text",
          "describe": "是否显示进度条文字内容",
          "type": "boolean",
          "emun": "—",
          "default": "TRUE"
        }, {
          "name": "stroke-linecap",
          "describe": "circle/dashboard 类型路径两端的形状",
          "type": "string",
          "emun": "butt/round/square",
          "default": "round"
        }, {"name": "format", "describe": "指定进度条文字内容", "type": "function(percentage)", "emun": "—", "default": "—"}]
    };
    return {
      btnDesc,
    };
  },
};
</script>

<style scoped>
.demo {
  margin-bottom: 0.1rem;
  max-width: 50%;
}
</style>
